<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '评价',
  },
}
</route>

<template>
  <div class="add-evaluate-page">
    <div class="score">
      <div class="title">
        <div class="left">您对此民宿还满意吗？</div>
        <div class="right">
          {{ score }}
          <span>分</span>
        </div>
      </div>

      <div class="star-box">
        <div class="item" v-for="(item, index) in scoreList" :key="index">
          <div class="star active" @click="clickScore(index)">
            <div
              class="bg"
              :style="{
                width: score < index ? '0%' : `${(score - index) * 100}%`,
              }"
            ></div>
            <image class="icon" src="/static/images/icon/star.png" />
          </div>
          <div
            class="text"
            :class="{
              active: Math.ceil(score) - 1 === index,
            }"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>

    <div class="input">
      <wd-textarea
        v-model="text"
        :maxlength="200"
        show-word-limit
        no-border
        custom-class="text-area"
        placeholder="分享卫生、环境、服务，设施等方面的体验，更能帮助到大家哦~"
      />

      <div class="upload">
        <ImgUpload v-model="fileList" multiple :count="10" />
      </div>
    </div>

    <div class="custom-button button" @click="submit()">提交评价</div>
  </div>
</template>

<script lang="ts" setup>
import { msgSuccess } from '@/utils/index'
import { switchTab } from '@/utils/page'

let orderId = ''
let layoutId = ''
onLoad((opt) => {
  orderId = opt.id
  layoutId = opt.layoutId
})

const scoreList = ref(['很糟糕', '不满意', '一般般', '满意', '太赞了'])
const score = ref(4.5)
const text = ref('')
function clickScore(index) {
  if (score.value === index + 1) {
    score.value = index + 0.5
  } else {
    score.value = index + 1
  }
}

const fileList = ref<any[]>([])

function submit() {
  uni.showLoading()
  http
    .post('/guest-scoring-app/save', {
      imgUrls: fileList.value.join(','),
      orderId,
      layoutId,
      title: text.value,
    })
    .then(() => {
      msgSuccess('提交成功').then(() => {
        switchTab('/pages/order/index')
      })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.add-evaluate-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 28rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
  background-color: var(--bgc4);
  .score {
    padding: 40rpx 0rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .title {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0rpx 24rpx;
      font-size: 35rpx;
      font-weight: 600;
      line-height: 40rpx;
      color: var(--color1);
    }
    .left {
      flex: 1;
    }
    .right {
      font-size: 38rpx;
      font-weight: 700;
      span {
        font-size: 23rpx;
        font-weight: 500;
      }
    }
  }

  .star-box {
    display: flex;
    justify-content: space-evenly;
    margin-top: 32rpx;
    .star {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      overflow: hidden;
      background-color: var(--bgc2);
      border-radius: 27rpx;
      .icon {
        position: relative;
        z-index: 2;
        width: 58rpx;
        height: 54rpx;
      }
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--sc3);
        transition: width 0.5s;
      }
    }
    .text {
      margin-top: 32rpx;
      font-size: 23rpx;
      color: var(--color4);
      text-align: center;
      &.active {
        color: var(--color1);
      }
    }
  }

  .input {
    padding: 30rpx 24rpx 10rpx;
    margin-top: 28rpx;
    background-color: #fff;
    border-radius: 30rpx;
    :deep(.text-area) {
      --wot-textarea-cell-padding: 0;
      --wot-textarea-padding: 0;
      .wd-textarea__value {
        padding-right: 0;
      }
    }
    :deep(.upload-img) {
      .wd-upload__picture,
      .wd-upload__evoke {
        overflow: hidden;
        border-radius: 23rpx;
      }
    }
  }

  .button {
    position: fixed;
    inset: 40rpx 30rpx;
    top: auto;
  }
}
</style>
